

<template>
    <tm-app class="groupMembers" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">群公告</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>
        <view
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="slim_box">
                <view class="sheet" v-if="isOwner">
                    <uni-easyinput v-model="notification" :inputBorder="false" type="textarea" maxlength="130"  trim :autoHeight="true" placeholderStyle="color:#ccc;font-size:30rpx;" placeholder="请输入公告,最多130字" ></uni-easyinput>
                </view>

                <view class="sheet" v-if="!isOwner">
                    <view class="notice">{{ notification||'暂无公告' }}</view>
                    
                </view>
            </view>

            <!-- <view v-if="isOwner" class="d-flex a-center j-center" style="margin-top:50rpx;"><tm-button :disabled="!notification" class="btn_main" :width="680" :shadow="-1" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="updateData" label="确认修改"></tm-button></view> -->
        </view>


        <view class="btn_bottom_box" v-if="isOwner">
            <view v-if="old_notification!==notification&&notification" class="btn_main_r" @tap="updateData">
                <text class="text">发布公告</text>
            </view>
            <view v-if="old_notification===notification||!notification" class="btn_main_r_disabled" @tap="updateData">
                <text class="text">发布公告</text>
            </view>
            <view class="bottom_seat"></view>
        </view>


    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onReady, onShow, onLoad,onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { groupUpdate } from "@/api/api";
import { config as configStore } from "@/store/config";


const groupId = ref('')

const goBack = () => {
    uni.navigateBack();
};


const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const bool = ref(false);
const updateLoading = ref(false);


const old_notification = ref('');

const notification = ref('');
const isOwner = ref(false);



const updateData = async()=>{
    if(updateLoading.value){
        return;
    }

    if(!notification.value){
        uni.showToast({
            icon: "none",
            title: "公告不能为空",
            duration: 1500,
        });
        return;
    }
    updateLoading.value = true;
    uni.showLoading();


    const res:any = await groupUpdate({groupId:groupId.value,notice:notification.value});
    const { flag,message } = res;
    updateLoading.value = false;
    if(flag!==1){
        uni.hideLoading();
        uni.showToast({
            icon: "none",
            title: message||'修改公告失败，请稍后再试',
            duration: 1500,
        });
        return;
    }
    uni.hideLoading();
    uni.showToast({
            icon: "success",
            title: '已发布',
            duration: 1500,
    });

    setTimeout(()=>{
        goBack();
    },500)

    

}


onReady(() => {});

onLoad((option: any) => {
    if (option.groupID) {
        groupId.value = option.groupID;
        if(option.notification){
            notification.value = option.notification;
            old_notification.value = option.notification;
        }
        isOwner.value = option.isOwner==='true';
    }
});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupMembers{

    .btn_main{
        border-radius: 50rpx;
    }

    .content{
        position:absolute;
        width:750rpx;
        left:0;
        right:0;
        padding-top:20rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        .notice{
            background:#f5f5f5;
            padding:20rpx;
            border-radius: 20rpx;
            min-height:200rpx;
        }
    }

}
</style>
